<template>
    <div>
        <span>账号管理</span>
        <el-card class="box-card">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="formInline"
          >
            <el-col :span="6">
              <el-form-item label="账号：">
                <el-input v-model="formInline.account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="formInline.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号">
                <el-input v-model="formInline.cellPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="resetForm('formInline')">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-card>
        <el-col :span="6">
            <el-button type="primary" @click="addAccountShow=true">新增账号</el-button>
        </el-col>
        <el-table
          :data="accountList"
          stripe
          style="width: 100%"
        >
        <el-table-column
          align="center"
          v-for="(item,index) in accountListHD"
          :key="index"
          :prop="item.prop === 'status' ? '' : item.prop"
          :label="item.label"
        >
            <template v-if="item.prop==='status'" v-slot="{ row }">
              <span>{{!row.status ? "禁用" :"启用"}}</span>
            </template>
            <template v-else-if="item.prop==='action'" v-slot="{ row }">
              <el-button type="text" @click="compile(row)">编辑</el-button>
              <el-button type="text" @click="resetPasswords(row)">重置密码</el-button>
              <el-button type="text" @click="resetStatus(row)">{{row.status ? "禁用" :"启用"}}</el-button>
              <el-button type="text" @click="deleteAccount(row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="isCompile ? '编辑账号' : '新增账号'"
        :visible.sync="addAccountShow"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
            :inline="true"
            :model="dialogFrom"
            class="demo-form-inline"
            ref="dialogFrom"
            :rules="rules"
            label-width="80px"
          >
              <el-form-item label="用户名" prop="name">
                <el-input v-model="dialogFrom.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" >
                <el-input v-model="dialogFrom.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="cellPhone" >
                <el-input v-model="dialogFrom.cellPhone"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="position" >
                <el-input v-model="dialogFrom.position"></el-input>
              </el-form-item>
          </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="btnClose">取 消</el-button>
    <el-button type="primary" @click="onAddCompile()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
import { getAccountList, getAccountListHD, addAccountList, updateAccountList, deleteAccount } from '@/api/system'
import { queryFn } from '@/utils'
export default {
  name: 'ShopsAccountmanagement',

  data () {
    return {
      formInline: {
        account: '',
        name: '',
        cellPhone: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'change' }
        ],
        cellPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ]
      },
      accountList: [],
      // accountListHD: [{
      //   prop: 'account',
      //   label: '账号'
      // }, {
      //   prop: 'name',
      //   label: '姓名'
      // }, {
      //   prop: 'cellPhone',
      //   label: '联系电话'
      // }, {
      //   prop: 'position',
      //   label: '职位'
      // }, {
      //   prop: 'status',
      //   label: '状态'
      // }, {
      //   prop: 'action',
      //   label: '操作'
      // }],
      accountListHD: [],
      addAccountShow: false,
      dialogFrom: {
        id: '',
        account: '',
        name: '',
        password: '',
        cellPhone: '',
        position: '',
        status: ''
      },
      isCompile: false,
      accountId: 1535133
    }
  },
  created () {
    this.getAccountList()
    this.getAccountListHD()
  },

  mounted () {

  },

  methods: {
    async deleteAccount (row) {
      await deleteAccount(row.id)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.getAccountList()
    },
    // 重置密码
    async resetPasswords (row) {
      row.password = '123456'
      await updateAccountList(row)
      this.$message({
        message: '重置密码成功!新密码为:123456',
        type: 'success'
      })
    },
    async resetStatus (row) {
      row.status = !row.status
      await updateAccountList(row)
      this.$message({
        message: `${!row.status ? '禁用' : '启用'}成功`,
        type: 'success'
      })
    },
    // 查询按钮
    onSubmit () {
      // console.log('submit!')
      const res = queryFn({
        account: this.formInline.account,
        name: this.formInline.name,
        cellPhone: this.formInline.cellPhone
      })
      this.getAccountList(res)
    },
    // 重置按钮
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 关闭弹窗
    btnClose () {
      this.addAccountShow = false
      if (this.isCompile) {
        this.isCompile = false
      }
      this.closeMethod()
    },
    handleClose (done) {
      if (this.isCompile) {
        this.isCompile = false
      }
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.closeMethod()
        })
        .catch(_ => {})
    },
    // 清空表单数据
    closeMethod () {
      this.dialogFrom = {
        id: '',
        account: '',
        name: '',
        password: '',
        cellPhone: '',
        position: '',
        status: ''
      }
    },
    // 编辑按钮
    compile (row) {
      this.dialogFrom = row
      this.isCompile = true
      this.addAccountShow = true
    },
    // 获取用户表
    async getAccountList (params) {
      if (params) {
        const { data } = await getAccountList(params)
        this.accountList = data
      } else {
        const { data } = await getAccountList()
        this.accountList = data
      }
    },
    // 获取渲染表头
    async getAccountListHD () {
      const { data } = await getAccountListHD()
      this.accountListHD = data
    },
    // 新增/编辑账号
    async onAddCompile () {
      if (this.isCompile) {
        await updateAccountList(this.dialogFrom)
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
      } else {
        this.accountId++
        this.dialogFrom.status = false
        this.dialogFrom.account = this.accountId
        const data = this.dialogFrom
        await addAccountList(data)
        this.$message({
          message: '新增成功',
          type: 'success'
        })
      }
      this.addAccountShow = false
      this.closeMethod()
      this.getAccountList()
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 20px 0;
}
</style>
